<template>
  <div class="layout">
    <!-- 顶部导航栏 -->
    <el-header class="header">
      <div class="logo">
        <img src="../assets/logo1.png" alt="Logo">
        <span>汽车维修管理系统</span>
      </div>
      <div class="header-right">
        <el-button :icon="Search" circle></el-button>
        <el-button :icon="Bell" circle></el-button>
        <el-button :icon="Moon" circle></el-button>
        <div class="user-info">
          <el-avatar :size="32" :src="avatar"></el-avatar>
          <span>打工人</span>
        </div>
      </div>
    </el-header>

    <!-- 主要内容区 -->
    <div class="main-container">
      <!-- 左侧菜单 -->
      <el-aside width="200px" class="sidebar">
        <el-menu
            :default-active="$route.path"
            class="el-menu-vertical"
            :router="true"
        >
          <el-menu-item index="/admin/home">
            <el-icon>
              <HomeFilled/>
            </el-icon>
            <span>首页（工作台）</span>
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon>
                <User/>
              </el-icon>
              <span>账户管理</span>
            </template>
            <el-menu-item index="/admin/account/employee-manage">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>员工管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/account/supplier-manage">
              <el-icon>
                <Shop/>
              </el-icon>
              <span>供应商管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/account/customer-manage">
              <el-icon>
                <UserFilled/>
              </el-icon>
              <span>客户管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="2">
            <template #title>
              <el-icon>
                <Box/>
              </el-icon>
              <span>配件管理</span>
            </template>
            <el-menu-item index="/admin/part/stock-manage">
              <el-icon>
                <Files/>
              </el-icon>
              <span>库存管理</span>
            </el-menu-item>
            <el-menu-item index="/admin/part/purchase">
              <el-icon>
                <ShoppingCart/>
              </el-icon>
              <span>配件采购</span>
            </el-menu-item>
            <el-menu-item index="/admin/part/cart">
              <el-icon>
                <ShoppingCartFull/>
              </el-icon>
              <span>配件购物车</span>
            </el-menu-item>
            <el-menu-item index="/admin/part/repair-approve">
              <el-icon>
                <Check/>
              </el-icon>
              <span>维修审批</span>
            </el-menu-item>
            <el-menu-item index="/admin/part/sale-record">
              <el-icon>
                <Document/>
              </el-icon>
              <span>销售记录</span>
            </el-menu-item>
            <el-menu-item index="/admin/part/purchase-record">
              <el-icon>
                <Document/>
              </el-icon>
              <span>采购记录</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="3">
            <template #title>
              <el-icon>
                <Tools/>
              </el-icon>
              <span>工具管理</span>
            </template>
            <el-menu-item index="3-1">
              <el-icon>
                <Files/>
              </el-icon>
              <span>库存管理</span>
            </el-menu-item>
            <el-menu-item index="3-2">
              <el-icon>
                <ShoppingCart/>
              </el-icon>
              <span>工具采购</span>
            </el-menu-item>
            <el-menu-item index="3-3">
              <el-icon>
                <ShoppingCartFull/>
              </el-icon>
              <span>工具购物车</span>
            </el-menu-item>
            <el-menu-item index="3-4">
              <el-icon>
                <Check/>
              </el-icon>
              <span>维修审批</span>
            </el-menu-item>
            <el-menu-item index="3-5">
              <el-icon>
                <Document/>
              </el-icon>
              <span>领用记录</span>
            </el-menu-item>
            <el-menu-item index="3-6">
              <el-icon>
                <Document/>
              </el-icon>
              <span>采购记录</span>
            </el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/admin/repair-order-manage">
            <el-icon><Document /></el-icon>
            <span>维修订单管理</span>
          </el-menu-item>

          <el-sub-menu index="5">
            <template #title>
              <el-icon>
                <Money/>
              </el-icon>
              <span>财务管理</span>
            </template>
            <el-menu-item index="/admin/finance/order-settle">
              <el-icon>
                <Wallet/>
              </el-icon>
              <span>费用结算</span>
            </el-menu-item>
            <el-menu-item index="/admin/finance/deposit-manage">
              <el-icon>
                <CreditCard/>
              </el-icon>
              <span>预收款管理</span>
            </el-menu-item>
          </el-sub-menu>

          <el-sub-menu index="6">
            <template #title>
              <el-icon>
                <DataLine/>
              </el-icon>
              <span>统计报表</span>
            </template>
            <el-menu-item index="/admin/statement/business-report">
              <el-icon>
                <PieChart/>
              </el-icon>
              <span>经营统计报表</span>
            </el-menu-item>
            <el-menu-item index="/admin/statement/settle-order">
              <el-icon>
                <Document/>
              </el-icon>
              <span>结算单查询</span>
            </el-menu-item>
            <el-menu-item index="/admin/statement/arrearage-order">
              <el-icon>
                <Search/>
              </el-icon>
              <span>欠款客户查询</span>
            </el-menu-item>
            <el-menu-item index="/admin/statement/dispatch-order">
              <el-icon>
                <DataAnalysis/>
              </el-icon>
              <span>维修派工统计</span>
            </el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-aside>

      <!-- 主要内容区 -->
      <el-main class="content">
        <router-view></router-view>
      </el-main>
    </div>
  </div>
</template>

<script setup>
import avatar from '@/assets/avatar.png'; // 导入头像图片

import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import {
  Search,
  Bell,
  Moon,
  HomeFilled,
  User,
  UserFilled,
  Shop,
  Box,
  Files,
  ShoppingCart,
  ShoppingCartFull,
  Check,
  Document,
  Tools,
  List,
  Money,
  Wallet,
  CreditCard,
  DataLine,
  PieChart,
  DataAnalysis
} from '@element-plus/icons-vue'

const router = useRouter()

onMounted(() => {
  // 如果当前路径是 /admin，则重定向到 /admin/home
  if (router.currentRoute.value.path === '/admin') {
    router.push('/admin/home')
  }
})
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.header {
  height: 60px;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid #74a4ff;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px;
  color: #5a6cf0;
}

.logo img {
  height: 50px;
  width: 50px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.main-container {
  display: flex;
  flex: 1;
  height: calc(100vh - 60px);
  overflow: hidden;
}

.sidebar {
  background-color: #fff;
  border-right: 1px solid #74a4ff;
  height: 100%;
}

.el-menu {
  border-right: none;
}

.content {
  padding: 20px;
  background-color: #f5f7fa;
  height: 100%;
  overflow-y: auto;
}

.el-menu-item.is-active {
  background-color: #ecf5ff;
}

.el-menu-item:hover {
  background-color: #f5f7fa;
}
</style>
